<template>
<!-- 引导页组件 -->
    <div>
      <el-tooltip :content="$t('msg.navBar.guide')">
         <span id="guide-start" class="icon iconfont icon-yindaoye" @click="onClick"></span>
      </el-tooltip>
    </div>
</template>

<script setup >
import {onMounted} from 'vue'
//导入driver.js 引导页
import Driver from 'driver.js'
//导入driver的css
import 'driver.js/dist/driver.min.css'
import { useI18n } from 'vue-i18n'
import steps from './steps.js'

const i18n = useI18n()

// 使用driver 需要在当前页面的mounte(页面加载后)生命周期后使用
let driver = null

onMounted(()=>{
  driver =  new Driver({
    // 禁止点击蒙版关闭
    allowClose:false,
    //关闭的文本
    closeBtnText:i18n.t('msg.guide.close'),
    //下一个的btn的文本
    nextBtnText:i18n.t('msg.guide.next'),
    //上一个的btn的文本
    prevBtnText :i18n.t('msg.guide.prev'),
  })
})

const onClick = ()=>{
  driver.defineSteps(steps(i18n))
  driver.start()
}
</script>

<style scoped>
.icon{
  font-size: 28px;
}
</style>